<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Eloquent Javascript Notes-XML Http Request-jqfocus.com</title>
        <link rel="stylesheet" type="text/css" href="css/global.css">
        </link>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        </link>
        <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
        </script>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <style>
            article, aside, figure, footer, header, hgroup, menu, nav, section {
                display: block;
            }
            
            header {
                font-size: 1.2em;
                font-weight: bold;
                padding: 10px;
            }
            
            #log {
                color: red;
				left: 0;
			    margin-left: 150px;
				padding:15px 0;
			    position: absolute;
			    top: 0;
			    width: 200px;
				height:500px;
				overflow:hidden;
				display:none;
				text-align:center;
            }
			.demo-tip{font-size:1.0em;color:#000;font-style:normal;}
			strong{font-weight:bold;}
        </style>		
	</head>
	<body>
		<header class="demo-part">1,Normalise XMLHttpRequest object</header>
		<section class="demo-part demo-ct">
			<div class="demo-tip">
				<strong>Http response status code</strong>
				<p>Accessed via xhr.status.If you make non-HTTP request such as FTP,the status will not be usable!</p>
				<ul>
					<li>200 - Request is successful</li>
					<li>304 - Reponse text was not modifed and cached!Most of the times browsers will show you 200 instead of 304</li>
					<li>404 - Resource not found</li>
				</ul>
				<strong>Http request's readyState</strong>
				<ul>
					<li>4 - Request is finished!</li>
				</ul>
			</div>
			<pre class="brush:js;">
		/* =====1,Normalise XMLHttpRequest===== */		
		function XHR() {
		  try {return new XMLHttpRequest();} /* Most contemporary browsers */
		  catch (error) {};
		  try {return new ActiveXObject("Msxml2.XMLHTTP");} /* IE */
		  catch (error) {};
		  try {return new ActiveXObject("Microsoft.XMLHTTP");} /* IE5.5 and below? */
		  catch (error) {};
		
		  return null;
		};
		
		/* =====2,Http synchronous request demo===== */
		var xhr=XHR();
		//prepare the request
		xhr.open("GET","xxx.txt",false/* asynchronous or not */);
		//set request header
		//xhr.setRequestHeader("xxx","yyy");
		//do the request.
		//xhr.send("data");//post some data to server when making a post request.
		xhr.send(null);
		//response text
		alert(xhr.responseText);
		
		/* =====2.1 Response status ===== */
		alert(xhr.status);
		alert(xhr.statusText);		
		
		/* =====2.2 Response header ===== */
		
		//response headers text
		alert(xhr.getAllResponseHeaders());
		//response header by name
		alert(xhr.getResponseHeader("Date"));
		
		/* =====3, Http asynchronous request demo ,A.K.A AJAX ===== */
		var xhr1=XHR();
		xhr.open("GET","xxx.txt",true);
		xhr.send(null);
		// listen to the 'readystatechange' event
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					alert(xhr.responseText);
				}else{
					alert(xhr.status+""+xhr.statusText);
				};
			};
		};
		
			</pre>
		</section>
	</body>
</html>
